<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>系统管理后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" />
    <link href="${pageContext.request.contextPath}/static/admin/assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/admin/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/css/vendor/animate/animate.min.css">
    <link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/mmenu/css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/rickshaw/css/rickshaw.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/morris/css/morris.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/summernote/css/summernote.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/summernote/css/summernote-bs3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/admin/assets/js/vendor/chosen/css/chosen-bootstrap.css">

    <link href="${pageContext.request.contextPath}/static/admin/assets/css/minimal.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="bg-1">



<!-- Preloader -->
<div class="mask"><div id="loader"></div></div>
<!--/Preloader -->

<!-- Wrap all page content here -->
<div id="wrap">




    <!-- Make page fluid -->
    <div class="row">





        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation" id="navbar">



            <!-- Branding -->
            <div class="navbar-header col-md-2">
                <a class="navbar-brand" href="index.html">
                    <strong>Shakes</strong>Beare
                </a>
                <div class="sidebar-collapse">
                    <a href="#">
                        <i class="fa fa-bars" style="line-height: 45px"></i>
                    </a>
                </div>
            </div>
            <!-- .nav-collapse -->
            <div class="navbar-collapse">
                <!-- Quick Actions -->
                <ul class="nav navbar-nav quick-actions">
                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-envelope"></i>
                            <span class="label label-transparent-black">1</span>
                        </a>

                        <ul class="dropdown-menu wider arrow nopadding messages">
                            <li><h1>You have <strong>1</strong> new message</h1></li>
                            <li>
                                <a class="cyan" href="#">
                                    <div class="profile-photo">
                                        <img src="${pageContext.request.contextPath}/static/admin/assets/images/ici-avatar.jpg" alt />
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Ing. Imrich Kamarel</span>
                                        <span class="time">12 mins</span>
                                        <div class="message-content">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="green" href="#">
                                    <div class="profile-photo">
                                        <img src="${pageContext.request.contextPath}/static/admin/assets/images/arnold-avatar.jpg" alt />
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Arnold Karlsberg</span>
                                        <span class="time">1 hour</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="${pageContext.request.contextPath}/static/admin/assets/images/face.jpeg" alt />
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">John Douey</span>
                                        <span class="time">3 hours</span>
                                        <div class="message-content">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="red" href="#">
                                    <div class="profile-photo">
                                        <img src="${pageContext.request.contextPath}/static/admin/assets/images/peter-avatar.jpg" alt />
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Peter Kay</span>
                                        <span class="time">5 hours</span>
                                        <div class="message-content">Ut enim ad minim veniam, quis nostrud exercitation</div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="orange" href="#">
                                    <div class="profile-photo">
                                        <img src="${pageContext.request.contextPath}/static/admin/assets/images/george-avatar.jpg" alt />
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">George McCain</span>
                                        <span class="time">6 hours</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
                                    </div>
                                </a>
                            </li>


                            <li class="topborder"><a href="#">Check all messages <i class="fa fa-angle-right"></i></a></li>
                        </ul>

                    </li>
                    <li class="dropdown divided user" id="current-user">
                        <div class="profile-photo">
                            <img src="${pageContext.request.contextPath}/static/admin/assets/images/face.jpeg" alt />
                        </div>
                        <a class="dropdown-toggle options" data-toggle="dropdown" href="#">
                            管理员 <i class="fa fa-caret-down"></i>
                        </a>

                        <ul class="dropdown-menu arrow settings">

                            <li>

                                <h3>Backgrounds:</h3>
                                <ul id="color-schemes">
                                    <li><a href="#" class="bg-1"></a></li>
                                    <li><a href="#" class="bg-2"></a></li>
                                    <li><a href="#" class="bg-3"></a></li>
                                    <li><a href="#" class="bg-4"></a></li>
                                    <li><a href="#" class="bg-5"></a></li>
                                    <li><a href="#" class="bg-6"></a></li>
                                </ul>

                                <div class="form-group videobg-check">
                                    <div class="col-xs-4 control-label">
                                        <div class="onoffswitch greensea small">
                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="videobg-check">
                                        </div>
                                    </div>
                                </div>

                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="${pageContext.request.contextPath }/admin/setting/index.action"><i class="fa fa-user"></i>修改密码</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath }/admin/logout.action"><i class="fa fa-power-off"></i> Logout</a>
                            </li>
                            <li></li>

                        </ul>
                    </li>


                </ul>
                <!-- /Quick Actions -->



                <!-- Sidebar -->
                <ul class="nav navbar-nav side-nav" id="sidebar">

                    <li class="collapsed-content">
                        <ul>
                            <li class="search"><!-- Collapsed search pasting here at 768px --></li>
                        </ul>
                    </li>

                    <li class="navigation" id="navigation">
                        <a href="#" class="sidebar-toggle" data-toggle="#navigation">Navigation <i class="fa fa-angle-up"></i></a>

                        <ul class="menu">

                            <li class="active">
                                <a href="${pageContext.request.contextPath }/admin/index/index.action">
                                    <i class="fa fa-tachometer"></i> 概况
                                    <span class="badge badge-red"></span>
                                </a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/admin/ad/index.action">
                                    <i class="fa fa-tint"></i> 广告管理
                                </a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-th-large"></i> 用户管理 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/customer/index.action">
                                            <i class="fa fa-caret-right"></i> 用户管理
                                        </a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/admin/customer/resumeIndex.action">
                                            <i class="fa fa-caret-right"></i> 简历管理
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-th-large"></i> 企业管理 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="${pageContext.request.contextPath }/admin/company/index.action">
                                            <i class="fa fa-caret-right"></i> 企业用户账号
                                        </a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath }/admin/company/verify.action">
                                            <i class="fa fa-caret-right"></i> 企业账号审核
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-child"></i> 职位管理 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="${pageContext.request.contextPath }/admin/job/index.action">
                                            <i class="fa fa-caret-right"></i> 职位列表
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                </ul>
                <!-- Sidebar end -->





            </div>
            <!--/.nav-collapse -->





        </div>
        <!-- Fixed navbar end -->






        <!-- Page content -->
        <div id="content" class="col-md-12">









            <!-- page header -->
            <div class="pageheader">
                <h2><i class="fa fa-tachometer"></i> 概况
                </h2>
            </div>
            <!-- /page header -->






            <!-- content main container -->

            <div class="main">
                <!--具体功能框架写在这里-->
                <div class="row cards">

                    <div class="card-container col-lg-3 col-sm-6 col-sm-12">
                        <div class="card card-redbrown hover">
                            <div class="front">

                                <div class="media">
                                      <span class="pull-left">
                                        <i class="fa fa-users media-object"></i>
                                      </span>

                                    <div class="media-body">
                                        <small>企业用户数</small>
                                        <h2 class="media-heading animate-number" data-value="${company_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/company/index.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                        <div class="card card-drank hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-adn media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>已认证企业数</small>
                                        <h2 class="media-heading animate-number" data-value="${confirm_company_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="25" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="25%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/company/verify.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-sm-12">
                        <div class="card card-greensea hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-bookmark media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>待审核企业数</small>
                                        <h2 class="media-heading animate-number" data-value="${confirming_company_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="42" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="42%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/company/verify.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-sm-12">
                        <div class="card card-blue hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-user media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>个人用户数量</small>
                                        <h2 class="media-heading animate-number" data-value="${customer_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="100" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="100%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/customer/index.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                        <div class="card card-slategray hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-eye media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>待审核职位数</small>
                                        <h2 class="media-heading animate-number" data-value="${confirmingJob_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="25" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="25%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/job/index.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                        <div class="card card-dutch hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-gift media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>职位数</small>
                                        <h2 class="media-heading animate-number" data-value="${job_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="25" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="25%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/job/index.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                        <div class="card card-amethyst hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-archive media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>简历数</small>
                                        <h2 class="media-heading animate-number" data-value="${resume_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="25" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="25%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/customer/resumeIndex.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                        <div class="card card-cyan hover">
                            <div class="front">

                                <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-rmb media-object"></i>
                      </span>

                                    <div class="media-body">
                                        <small>已投放广告数</small>
                                        <h2 class="media-heading animate-number" data-value="${ad_num}" data-animation-duration="1500">0</h2>
                                    </div>
                                </div>

                                <!--<div class="progress-list">-->
                                <!--<div class="details">-->
                                <!--<div class="title">This month plan %</div>-->
                                <!--</div>-->
                                <!--<div class="status pull-right bg-transparent-black-1">-->
                                <!--<span class="animate-number" data-value="25" data-animation-duration="1500">0</span>%-->
                                <!--</div>-->
                                <!--<div class="clearfix"></div>-->
                                <!--<div class="progress progress-little progress-transparent-black">-->
                                <!--<div class="progress-bar animate-progress-bar" data-percentage="25%"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                            </div>
                            <div class="back">
                                <a href="${pageContext.request.contextPath }/admin/ad/index.action">
                                    <i class="fa fa-bar-chart-o fa-4x"></i>
                                    <span>Check Summary</span>
                                </a>
                            </div>
                        </div>
                    </div>





                </div>
                <!--cadrs -->
                <!--统计表-->
                <section class="tile transparent">




                    <!-- tile header -->
                    <div class="tile-header color transparent-black textured rounded-top-corners">
                        <h1><strong>企业用户</strong> 统计</h1>
                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->


                    <!-- tile widget -->
                    <div class="tile-widget color transparent-black textured">
                        <div id="statistics-chart" class="chart statistics" style="height: 250px; width: 90%"></div>
                    </div>
                    <!-- /tile widget -->


                    <!-- tile body -->

                    <!-- /tile body -->


                </section>

                <section class="tile color transparent-black textured">



                    <!-- tile header -->
                    <div class="tile-header">
                        <h1><strong>个人用户</strong> 统计</h1>
                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->

                    <!-- tile body -->
                    <div class="tile-body">

                        <div id="combined-chart" style="height: 250px;"></div>

                    </div>
                    <!-- /tile body -->




                </section>
            </div>
            <!-- /content container -->

        </div>
        <!-- Page content end -->


    </div>
    <!-- Make page fluid-->




</div>
<!-- Wrap all page content end -->



<section class="videocontent" id="video"></section>



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${pageContext.request.contextPath}/static/admin/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/videobackground/jquery.videobackground.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/blockui/jquery.blockUI.js"></script>

<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.time.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.selection.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.animator.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.orderBars.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.categories.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/easypiechart/jquery.easypiechart.min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/flot/jquery.flot.tooltip.min.js"></script>

<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/rickshaw/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/rickshaw/d3.v2.js"></script>
<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/rickshaw/rickshaw.min.js"></script>

<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/morris/morris.min.js"></script>

<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/summernote/summernote.min.js"></script>

<script src="${pageContext.request.contextPath}/static/admin/assets/js/vendor/chosen/chosen.jquery.min.js"></script>

<script src="${pageContext.request.contextPath}/static/admin/assets/js/minimal.min.js"></script>
<script>
    $(function(){

        // Initialize card flip
        $('.card.hover').hover(function(){
            $(this).addClass('flip');
        },function(){
            $(this).removeClass('flip');
        });

        var d1=[
            <c:forEach items="${company_num_list}" var="entry" varStatus="status">
            [${12-status.index},${entry.value}],
            </c:forEach>
        ];
        // Initialize flot chart
        <%--var d1 =[ [1, ${company_num_list[11]}],--%>
            <%--[2, ${company_num_list[10]}],--%>
            <%--[3, ${company_num_list[9]}],--%>
            <%--[4, ${company_num_list[8]}],--%>
            <%--[5, ${company_num_list[7]}],--%>
            <%--[6, ${company_num_list[6]}],--%>
            <%--[7, ${company_num_list[5]}],--%>
            <%--[8, ${company_num_list[4]}],--%>
            <%--[9, ${company_num_list[3]}],--%>
            <%--[10, ${company_num_list[2]}],--%>
            <%--[11, ${company_num_list[1]}],--%>
            <%--[12, ${company_num_list[0]}]--%>
        <%--];--%>
        var d2 =[ [1, 463],
            [2, 578],
            [3, 327],
            [4, 984],
            [5, 1268],
            [6, 1684],
            [7, 1425],
            [8, 1233],
            [9, 1354],
            [10, 1200],
            [11, 1260],
            [12, 1320]
        ];
//        var months = ["January", "February", "March", "April", "May", "Juny", "July", "August", "September", "October", "November", "December"];
        var months = [<c:forEach items="${company_x}" var="entry" varStatus="status">"${entry.value}",</c:forEach>];
        var y = [<c:forEach items="${company_x}" var="entry" varStatus="status">[${12-status.index},"${entry.value}"],</c:forEach>];

        // flot chart generate
        var plot = $.plotAnimator($("#statistics-chart"),
                [
                    {
                        label: 'CompanyUsers',
                        data: d1,
                        lines: {lineWidth:3},
                        shadowSize:0,
                        color: '#ffffff'
                    },
//          { label: "Visits",
//            data: d2,
//            animator: {steps: 99, duration: 500, start:200, direction: "right"},
//            lines: {
//              fill: .15,
//              lineWidth: 0
//            },
//            color:['#ffffff']
//          },
                    {
                        label: 'CompanyUsers',
                        data: d1,
                        points: { show: true, fill: true, radius:6,fillColor:"rgba(0,0,0,.5)",lineWidth:2 },
                        color: '#fff',
                        shadowSize:0
                    }
//          ,
//          { label: "Visits",
//            data: d2,
//            points: { show: true, fill: true, radius:6,fillColor:"rgba(255,255,255,.2)",lineWidth:2 },
//            color: '#fff',
//            shadowSize:0
//          }
                ],{

                    xaxis: {

                        tickLength: 0,
                        tickDecimals: 0,
                        min:1,
                        ticks: y,

                        font :{
                            lineHeight: 24,
                            weight: "300",
                            color: "#ffffff",
                            size: 14
                        }
                    },

                    yaxis: {
                        ticks: 4,
                        tickDecimals: 0,
                        tickColor: "rgba(255,255,255,.3)",

                        font :{
                            lineHeight: 13,
                            weight: "300",
                            color: "#ffffff"
                        }
                    },

                    grid: {
                        borderWidth: {
                            top: 0,
                            right: 0,
                            bottom: 1,
                            left: 1
                        },
                        borderColor: 'rgba(255,255,255,.3)',
                        margin:0,
                        minBorderMargin:0,
                        labelMargin:20,
                        hoverable: true,
                        clickable: true,
                        mouseActiveRadius:6
                    },

                    legend: { show: false}
                });

        $(window).resize(function() {
            // redraw the graph in the correctly sized div
            plot.resize();
            plot.setupGrid();
            plot.draw();
        });

        $('#mmenu').on(
                "opened.mm",
                function()
                {
                    // redraw the graph in the correctly sized div
                    plot.resize();
                    plot.setupGrid();
                    plot.draw();
                }
        );

        $('#mmenu').on(
                "closed.mm",
                function()
                {
                    // redraw the graph in the correctly sized div
                    plot.resize();
                    plot.setupGrid();
                    plot.draw();
                }
        );

        // tooltips showing
        $("#statistics-chart").bind("plothover", function (event, pos, item) {
            if (item) {
                var x = item.datapoint[0],
                        y = item.datapoint[1];

                $("#tooltip").html('<h1 style="color: #418bca">' + months[12-x] + '</h1>' + '<strong>' + y + '</strong>' + ' ' + item.series.label)
                        .css({top: item.pageY-30, left: item.pageX+5})
                        .fadeIn(200);
            } else {
                $("#tooltip").hide();
            }
        });


        //tooltips options
        $("<div id='tooltip'></div>").css({
            position: "absolute",
            //display: "none",
            padding: "10px 20px",
            "background-color": "#ffffff",
            "z-index":"99999"
        }).appendTo("body");

        // Combined flot chart
//        var d11 = [['JAN', 150], ['FEB', 181], ['Mar', 252], ['APR', 356],['MAY', 851], ['JUN', 1589], ['JUL', 951], ['AUG', 651],['SEP', 591], ['OCT', 382], ['NOV', 951], ['DEC', 741]];
        var d11 = [<c:forEach items="${customer_num_list}" var="entry" varStatus="status">["<c:out value="${customer_x[entry.key]}" />" ,"${entry.value}"],</c:forEach>];
        $.plot('#combined-chart', [
                    {
                        label: 'Customer',
                        data: d11,
                        bars: {
                            show: true,
                            barWidth:  0.5,
                            fill:  1,
                            align: 'center'
                        }
                    }],
                {
                    colors: ['#418bca' ,'#22beef'],
                    xaxis: {
                        mode: 'categories',
                        tickLength: 0,
                        font :{
                            lineHeight: 24,
                            weight: '300',
                            color: 'rgba(255,255,255,.8)',
                            size: 14
                        }
                    },
                    yaxis: {
                        tickColor: 'rgba(255,255,255,.2)' ,
                        tickDecimals: 0,
                        font :{
                            lineHeight: 13,
                            weight: '300',
                            color: 'rgba(255,255,255,.8)'
                        }
                    },
                    grid: {
                        borderWidth: {
                            top: 0,
                            right: 0,
                            bottom: 1,
                            left: 1
                        },
                        margin: 13,
                        labelMargin:20,
                        hoverable: true,
                        clickable: true,
                        mouseActiveRadius:6,
                        color : 'rgba(255,255,255,.2)'
                    },
                    legend: { show: false },
                    tooltip: true
                });

        $("#combined-chart div.legend >div").css("background", "transparent");
        $("#combined-chart div.legend table").css("color", "rgba(255,255,255,.8)");

        // tooltips showing
        $('#combined-chart').bind("plothover", function (event, pos, item) {
            if (item) {
                var x = item.datapoint[0],
                        y = item.datapoint[1];
                $("#flotTip").css({top: item.pageY-30});
            } else {
                $("#flotTip").hide();
            }
        });

    });


</script>
</body>
</html>


